import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { changeCreate } from "@/store/ranking/rankingSlice";
import { Button, Table, type TableProps } from "antd";
import type { ReactElement } from "react";
import { shallowEqual } from "react-redux";

export interface DataType {
  uuid: string;
  gear_id: number;
  max_index: number;
  min_index: number;
  rank_type: number;
  rank_reward: string;
}

export default function MTable(): ReactElement<typeof Table, "div"> {
  const { table } = useAppSelector((state) => state.ranking, shallowEqual);
  const {
    config: {
      data: { data: { rank_gear_map = [], rank_type_map = [] } = {} } = {},
    } = {},
  } = useAppSelector((state) => state.app, shallowEqual);
  const dispatch = useAppDispatch();

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "榜单类型",
      dataIndex: "rank_type",
      key: "rank_type",
      align: "center",
      render: (text) => rank_type_map?.find?.((i) => i.value === text)?.label,
    },
    {
      title: "档位id",
      dataIndex: "gear_id",
      key: "gear_id",
      align: "center",
      render: (text) => rank_gear_map?.find?.((i) => i.value === text)?.label,
    },
    {
      title: "奖励值",
      dataIndex: "rank_reward",
      key: "rank_reward",
      align: "center",
    },
    {
      title: "操作",
      dataIndex: "opt",
      key: "opt",
      align: "center",
      render: (_text, record) => {
        return (
          <Button
            size="small"
            type="primary"
            ghost
            onClick={() => {
              dispatch(changeCreate({ type: "update", open: true, record }));
            }}
          >
            编辑
          </Button>
        );
      },
    },
  ];
  return (
    <Table
      columns={columns}
      scroll={{ x: "max-content" }}
      bordered
      loading={table.status === "loading"}
      dataSource={table?.data?.data?.rank_reward_config || []}
      size="small"
      rowKey="uuid"
    />
  );
}
